<template>
	<view class="my-select">
		<view
			class="my-select-item"
			:style="{
				marginTop: index < list ? 0 : `${margin || 0}rpx`,
				background: `${background || '#eceff6'}`,
				padding: `${padding || 0}rpx`,
				borderRadius: `${borderRadius || 0}rpx`,
				width: `calc((100% + ${margin || 0}rpx) /${list} - ${margin || 0}rpx)`,
				marginRight: (index + 1) % list ? `${margin || 0}rpx` : 0
			}"
			:class="{
				on: item.IsDefault
			}"
			@click="handleClick(item)"
			:key="index"
			v-for="(item, index) in options"
		>
			{{ item[labelName] }}
		</view>
	</view>
</template>

<script lang="uts" setup>
import { useVue } from '@/utils/useVue.uts'
const { ref, reactive, computed } = useVue()
interface Props {
	options ?: any,//类型
	labelName ?: string,//类型
	valueName ?: string,//类型
	defaultName ?: string,//类型
	background ?: string,
	padding ?: number,
	margin ?: number,
	borderRadius ?: number,
	list ?: number,
	isRequired?:boolean,//是否必选
	isMultipleChoice?:boolean,//是否多选
}
const props = withDefaults(defineProps<Props>(), {
	labelName: "label",
	valueName: "value",
	defaultName: "IsDefault",
	margin: 8,
	padding: 8,
	borderRadius: 6,
	list: 3,
	isRequired:true,
})
const emit = defineEmits(['update:modelValue', 'change'])
// 失焦事件
const handleClick = (item : any) => {
	if(props.isMultipleChoice){
		item[props.defaultName]=!item[props.defaultName]
	}else{
		props.options.forEach((el:any)=>{
			if(el[props.valueName]===item[props.valueName]){
				el[props.defaultName]=props.isRequired? true:!el[props.defaultName]
			}else{
				el[props.defaultName]=false
			}
		})
	}
	emit('change',item)
}
</script>

<style scoped lang="scss">
.my-select {
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;

	.my-select-item {
		box-sizing: border-box;
		text-align: center;
		-webkit-line-clamp: 1;
		/* 限制文本显示的行数为2行 */
		-webkit-box-orient: vertical;
		/* 设置盒模型布局方向为垂直 */
		display: -webkit-box;
		/* 使用旧版WebKit内核布局盒模型 */
		overflow: hidden;
		/* 超出部分隐藏 */
		text-overflow: ellipsis;

		/* 使用省略号表示被截断的部分 */
		&.on {
			background: $u-primary !important;
			color: #fff;
		}
	}
}
</style>
